<template>
  <div class="board-box-3">
    <div :class="`box-3-title ${titleClass}`">
      {{title}}
    </div>
    <div class="box-3-inner">
      <slot></slot>
    </div>

  </div>

</template>
<script lang="ts" setup>
import { defineProps } from 'vue';

defineProps<{
  title: string,
  titleClass: boolean
}>()
</script>

<style lang="less" scoped>
.board-box-3 {
  height: 100%;
  padding-top: 2vh;
  padding-bottom: 0.5vh;
  position: relative;
  // overflow: hidden;

  .box-3-inner {
    background: url('./images/box3_bg.png') no-repeat;
    background-size: 100% 100%;
    position: relative;
    height: calc(100%);
    // overflow: hidden;
    padding-top: 2vh;
  }



  .box-3-title {
    text-align: center;
    color: #fff;
    font-size: 1.6vh;
    font-weight: 400;
    line-height: 4vh;
    height: 4vh;
    // overflow: hidden;
    background: url('./images/box3_title_bg.png');
    position: absolute;
    padding: 0 8vh;
    left: 50%;
    transform: translateX(-50%);
    background-size: 100% 100%;
    top: 0;
    z-index: 2;
  }

}
</style>
